<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-首页</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
	html,body{
		height:auto;
	} 
	.layui-table-view .layui-table th,.layui-table-view .layui-table td{padding:10px 0;}
	.area-block_active {
	    background-color: #62a8e9 !important;
	    color: #ffffff !important;
	    border:1px solid #62a8e9;
	}
	.layui-form-select{width:120px}
	.layui-input{height:30px}
</style>
<body>
<div class="layui-form">
<div class="layui-btn-group keyword " >
  <button class="layui-btn layui-btn-primary area-block_active">当前合同</button>
  <button class="layui-btn layui-btn-primary ">已结束</button>
  <button class="layui-btn layui-btn-primary">全部</button>
</div>
		<div class="layui-tab-content " id="teamList">
			<table class="layui-hide" id="LAY_table_contract" lay-filter="contract"></table> 
			
			</div>
	<input type="hidden" id="teamId" name="teamId" th:value="${teamId}" />
	<input type="hidden" id="fkProject" name="fkProject" th:value="${fkProject}" />
	</div>
</body>
<script>
var teamId = $("#teamId").val();
var state = 0;
var table;
var form;
$(function(){
	
	layui.use(['element','table','layer','form'], function(){
	  var element = layui.element;
	  table = layui.table;
	  form = layui.form;
	  element.on('tab(docNavTabBrief)', function(){
		  var target=$(this),index=$(this).index();
		  
	  });
	//方法级渲染
		table.render({
			id:'contract',
			method:'post',
		    elem: '#LAY_table_contract',
		    url: '/app/contractInfo/listdata',
		    where:{
		    	params:{
		    		teamId:teamId,
		    		state:state
		    	}
		    },
		    cols: [[
		      {field: 'contractNumber', title: '合同编号',templet:function(d){
		    	  return '<span onclick=tiaozhuan("'+d.id+'")>'+d.contractNumber+'<span>';
		      }}
		      ,{
					field : 'status',
					title : '状态',
					templet : function(d) {
						if(d.state == 0){
							return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;" onclick=tiaozhuan("'+d.id+'")>已签</span>';
						}else if(d.state == 1){
							return '<span style="background:#ffdfdf;color:#dd5a55;display:inline-block;padding:0 15px;" onclick=tiaozhuan("'+d.id+'")>已结束</span>';
						}else{
							return '<span style="background:#73bb4b;color:#fff;display:inline-block;padding:0 15px;" onclick=tiaozhuan("'+d.id+'")>快到期</span>';
						}
					}
				}
		      ,{field: 'date', title: '起止日期',templet:function(d){
		    	  return  '<span data-id="'+d.id+'" onclick=tiaozhuan("'+d.id+'")>'+d.startDate + ' 至 ' + d.endDate+'</span>'
		      }}
		      ,{field: 'opt', title: '操作',width:'20%',align:'center',templet:function(d){
		    	 return '<select name="interest" lay-filter="caozuo" data-id="'+d.id+'"><option value="">请选择</option><option value="0">续约</option>'
		          +'<option value="1">终止</option></select>'
		    	 // return '<a href="#" class="layui-btn  layui-btn-xs layui-btn-normal">合同续约</a>'
		      }}
		    ]]
		    ,page: true
			,done:function(){
				setHeight();
				form.render('select');
	        }
		});
		//tableBtnOpt();
		
		form.on('select(caozuo)', function(data){
			  //console.log(data.elem); //得到select原始DOM对象
			  //console.log(data.value); //得到被选中的值
			  //console.log(data.othis); //得到美化后的DOM对象
			  var id = $(data.elem).attr("data-id");
			 if(data.value == 0){
				var fkProject=$("#fkProject").val();
				var fkTeam  = $("#teamId").val();
				var iframeSrc='/app/contractInfo/toAddReNewContract/'+fkProject+'_'+fkTeam+'_'+id;
				var iframe = window.parent.parent.document.getElementById('project-iframe');
			    iframe.src = iframeSrc;
			 }else if(data.value == 1){
				   top.layer.open({
						type: 2, 
						title:"终止合同",
						area: ['700px','90%'],
						   shade: [0.6, '#000'],
						   zIndex:800,
						content:"/app/contractInfo/toEndContract/"+id , 
						end: function () {
							location.reload();
						}
					}); 
			  }
			  
			 
			}); 
	});
	$(".keyword button").on("click",function(){
		//$(".keyword button").removeClass("area-block_active");
		$(this).addClass("area-block_active").siblings().removeClass("area-block_active");
		state = $(this).index();
		if(state == 2){
			state = null;
			
		}
		 table.reload('contract', {
			  where: { //设定异步数据接口的额外参数，任意设
				  params:{
			    		teamId:teamId,
			    		state:state
			    	}
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			}); 
		
	})
	
})

function tiaozhuan(id){
	var iframeSrc='/app/contractInfo/detailCenter/'+id;
	 var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.parent.$(".iframe-wrap").html($(iframe)); 
}
/**
 * 行点击事件
 */
/* function tableBtnOpt(){
	var $mylist = $("#LAY_table_contract").next('.layui-table-view').find('.layui-table-body table.layui-table');
	//  点击tr元素,跳转详情基于table
	  $mylist.on("click",'tr',function(){
		  console.log(1);
			var targetI=$(this);
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			tiaozhuan(id);
			return false;
	  }); 
} */

/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	console.log("阻止");
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
/* 根据iframe的内容撑开iframe的容器 */
function setHeight(){
    var h = document.body.offsetHeight*1;
    window.parent.parentHeight(h);
}
</script>
</html>